<template>
    <div class="phone-box">
        <div class="content">
            <div class="phone-top">
                <i class="iconfont icon-yuanquan_xuanzhong"></i>
                <img src="../assets/pms_1617098700.31877799.jpg" alt="">
                <div class="words">
                    <p>MIX FOLD折叠手机</p>
                    <i class="iconfont icon-xiajiantou">12GB+512GB 黑色</i>
                    <div class="price">
                        <span>&yen;10999</span>
                        <span>-</span>
                        <span>1</span>
                        <span>+</span>
                    </div>
                </div>
            </div>
            <div class="phone-center">
                <img src="../assets/pms_1617016261.62734340.jpg" alt="">
                <div class="gift">赠品</div>
                <span>小米环保袋 橘色 x1</span>
                <span class="change">换赠品></span>
            </div>
            <div class="phone-center">
                <img src="../assets/pms_1617097752.22418929.jpg" alt="">
                <div class="gift">赠品</div>
                <span>MIX FOLD 芳纶纤维保护壳 黑色 x1</span>
            </div>
            <div class="phone-bottom">
                <span class="service">服务</span>
                <span>意外保护 | 云空间服务</span>
                <span>选购></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "phone"
}
</script>

<style scoped lang="scss">
    .phone-box{
        //outline: 1px solid red;
        padding: 10px;
        .content{
            width: 480px;
            height: 300px;
            margin: auto;
            //outline: 1px solid blue;
            background-color: white;
            border-radius: 10px;
            .phone-top{
                //outline: 1px solid green;
                display: flex;
                justify-content: space-around;
                .icon-yuanquan_xuanzhong{
                    font-size: 24px;
                    color: #FD5A36;
                    margin-top: 70px;
                }
                img{
                    width: 150px;
                    height: 150px;
                }
                .words{
                    >p{
                        font-size: 20px;
                        font-weight: bolder;
                    }
                }
                .price{
                    width: 170px;
                    margin-top: 15px;
                    display: flex;
                    justify-content: space-between;
                    :nth-child(1){
                        font-weight: bolder;
                        font-size: 20px;
                        color: #FD5A36;
                    }
                }
            }
            .phone-center{
                display: flex;
                align-items: center;
                img{
                    width: 50px;
                    height: 50px;
                    margin: 0 10px 0 84px;
                }
                .gift{
                    border: 1px solid #FD5A36;
                    border-radius: 3px;
                    color: #FD5A36;
                }
                .change{
                    margin-left: 70px;
                }
            }
            .phone-bottom{
                margin: 10px 0 0 90px;
                .service{
                    color: #BD7D43;
                    font-weight: bolder;
                    margin-right: 10px;
                }
                :nth-child(3){
                    margin-left: 112px;
                }
            }
        }
    }
</style>